/* -----------------------------------------------
 * HOTTWIT' - iam.warry.fr
 * -----------------------------------------------
 */

/* RESET CSS */
html, body, div, section, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead,
tr, th, td, hr {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}
body { line-height: 1; }
ol, ul, nav { list-style: none; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table {border-collapse: collapse;border-spacing: 0;}

/* -----------------------------------------------
 * LAYOUT
 * -----------------------------------------------
 */
html, body {
	font: 13px "Helvetica";
	height: 100%;
	background: -webkit-gradient(linear, left top, left bottom, from(#ddd), to(#fff));
	background: -moz-linear-gradient(top, #ddd, #fff);
  	background: -ms-linear-gradient(top, #ddd, #fff);
  	background: -o-linear-gradient(top, #ddd, #fff);
	-webkit-user-select: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}

#wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-box-sizing: border-box;
	border-bottom: 43px solid transparent;
}

/*
 * BONUS : La scrollbar stylée pour Safari
 */
 /*
::-webkit-scrollbar {
	background: rgba(0,0,0,.2);
	width: 6px;
}

::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,.4);
}
*/
#pages {
	height: 100%;
	width: 400%;
}

section {
	display: none;
	width: 25%;
	float: left;
}

section:target {
	display: block;
}

/* -----------------------------------------------
 * NAVIGATION
 * -----------------------------------------------
 */
nav {
	display: block;
	width: 100%;
	height: 43px;
	position: fixed;
	bottom: 0;
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#323232));
	background: -moz-linear-gradient(top, #000, #323232);
  	background: -ms-linear-gradient(top, #000, #323232);
  	background: -o-linear-gradient(top, #000, #323232);
	text-align: center;
}

nav li {
	display: inline-block;
	width: 15%;
	height: 40px;
	color: #fff;
	border-style: solid;
	border-color: transparent;
	border-width: 0 5px 0 5px;
}

nav a {
	width: 100%;
	height: 40px;
	text-indent: -999em;
}
nav a div{
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center center;
	-moz-mask-repeat: no-repeat;
	-moz-mask-position: center center;
	mask-repeat: no-repeat;
	mask-position: center center;
	height: 24px;
	width: 32px;
	margin: 6px auto;
	background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
	background: -moz-linear-gradient(top, #fff, #ccc);
  	background: -ms-linear-gradient(top, #fff, #ccc);
  	background: -o-linear-gradient(top, #fff, #ccc);
	mask-image: url('images/sprite.png');
	-webkit-mask-image: url('images/sprite.png');
	-moz-mask-image: url('images/sprite.png');
}

nav a[href="#add"] div, nav a[href="#dextro"] div, nav a[href="#com"] div {
	mask-position: 0 -117px;
	-webkit-mask-position: 0 -117px;
	-moz-mask-position: 0 -117px;
}

nav a[href="#table"] div{
	mask-position: 0 -142px;
	-webkit-mask-position: 0 -142px;
	-moz-mask-position: 0 -142px;
}

nav a[href="#list"] div{
	mask-position: 0 -92px;
	-webkit-mask-position: 0 -92px;
	-moz-mask-position: 0 -92px;
}

nav a[href="#graph"] div{
	mask-position: 0 -42px;
	-webkit-mask-position: 0 -42px;
	-moz-mask-position: 0 -42px;
}

nav a[href="#home"] div{
	mask-position: 0 -67px;
	-webkit-mask-position: 0 -67px;
	-moz-mask-position: 0 -67px;
}

nav li.active{
	border-image: url('images/sprite.png') 0 5 290 5 stretch stretch;
	-webkit-border-image: url('images/sprite.png') 0 5 290 5 stretch stretch;
	-moz-border-image: url('images/sprite.png') 0 5 290 5 stretch stretch;
}

nav li.active a div{
	background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#555));
	background: -moz-linear-gradient(top, #000, #555);
  	background: -ms-linear-gradient(top, #000, #555);
  	background: -o-linear-gradient(top, #000, #555);
}
/* -----------------------------------------------
 * ACCOUNT TAB
 * -----------------------------------------------
 */
#home {
	background: url(icone.png) center 250px no-repeat;
}
h1 {
	text-align: center;
	font-size: 26px;
	margin: 10px 0;
	color: transparent;
	background-color: rgba(3, 5, 9, 0.56);
	-webkit-background-clip: text;
	-moz-background-clip: text;
	text-shadow: rgba(255, 255, 255, 0.5) 0 5px 6px;
}
.form1 {
	margin: 10px auto 30px auto;
	padding: 10px;
	width: 240px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
	background: -moz-linear-gradient(top, #ccc, #fff);
  	background: -ms-linear-gradient(top, #ccc, #fff);
  	background: -o-linear-gradient(top, #ccc, #fff);
	-webkit-box-shadow: 0 -1px 0px #fff, 0 1px 0px #ccc, 0 2px 2px #999;
	-webkit-border-radius: 3px;
}

.form1 input[type="password"], .form1 input[type="email"], .form1 input[type="button"], .form1 input[type="text"], .form1 input[type="number"], .form1 input[type="datetime"]{
	display: block;
	margin: 0 0 5px;
	padding: 5px;
	width: 230px;
	background: -webkit-gradient(linear, left top, left bottom,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(40%, rgba(31,31,31,0)),
					color-stop(60%, rgba(31,31,31,0))),
				-webkit-gradient(linear, left top, right top,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(10%, rgba(31,31,31,0)),
					color-stop(90%, rgba(31,31,31,0))),
					#333;
				-moz-gradient(linear, left top, left bottom,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(40%, rgba(31,31,31,0)),
					color-stop(60%, rgba(31,31,31,0))),
				-moz-gradient(linear, left top, right top,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(10%, rgba(31,31,31,0)),
					color-stop(90%, rgba(31,31,31,0))),
					#333;
	border: 0;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	color: #DDD;
	font-size: 18px;
}
.form1 input[type="checkbox"], .form1 label {
	font-size: 18px;	
	color: #222;
}
.form1 input[type="button"] {
	margin: 10px 0 0 0;
	width: 240px;
	background: -webkit-gradient(linear, left top, left bottom, from(#0C6), to(#060));
	background: -moz-linear-gradient(top, #0C6, #060);
  	background: -ms-linear-gradient(top, #0C6, #060);
  	background: -o-linear-gradient(top, #0C6, #060);
	color: #eee;
	text-shadow: -1px -1px 0 rgba(0,0,0,.7);
	cursor:pointer;
}

.btn_blue {
	display: block;
	margin: 10px auto;
	text-align:center;
	text-decoration:none;
	padding: 5px;
	width: 230px;
	font-size: 18px;
	background: -webkit-gradient(linear, left top, left bottom, from(#09C), to(#039));
	background: -moz-linear-gradient(top, #09C, #039);
  	background: -ms-linear-gradient(top, #09C, #039);
  	background: -o-linear-gradient(top, #09C, #039);
	color: #eee;
	text-shadow: -1px -1px 0 rgba(0,0,0,.7);
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.btn_red {
	display: block;
	margin: 10px auto;
	text-align:center;
	text-decoration:none;
	padding: 5px;
	width: 230px;
	font-size: 18px;
	background: -webkit-gradient(linear, left top, left bottom, from(#C30), to(#900));
	background: -moz-linear-gradient(top, #C30, #900);
  	background: -ms-linear-gradient(top, #C30, #900);
  	background: -o-linear-gradient(top, #C30, #900);
	color: #eee;
	text-shadow: -1px -1px 0 rgba(0,0,0,.7);
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
.alerte, .alerte_insc, .alerte_mail, .alerte_dextro, .alerte_insulin, .alerte_com {
	width: 240px;
	margin: 0 auto;
	color:#CC3300;
	text-align:center;
	font-size: 1.2em;
}
.alerte_dextro, .alerte_insulin, .alerte_com{
	margin-bottom: 10px;
}
/* -----------------------------------------------
 * LIST
 * -----------------------------------------------
 */

#list ul{
	width:100%	
}
#list li{
	font-size: 22px;
	border-top:solid 1px #CCC;
	background:#FFF;	
	height:27px;
	padding:0 10px;
	/*-webkit-transition: height 200ms linear;*/
}
#list li:first-child{
	border:none;	
}
#list li:nth-child(2n+1){
	background:#EEE;
}
#list li.day{
	background:#333;
	color:#CCC;
	text-align:center;
	height: 22px;	
	font-size: 18px;
}
#list li a{
	float:right;
	margin: 0 5px;	
	text-indent: -999em;
	width:27px;
	height:27px;
}
#list .delete{
	background: url('images/sprite.png') no-repeat 0 -275px;
	width: 27px; 
	height: 27px;
}
#list .update{
	background: url('images/sprite.png') no-repeat 0 -303px;
	width: 27px; 
	height: 27px;
}
#list .up{
        height:170px;
        /*-webkit-transition: height 200ms linear;*/
}

.list_load{
	width: 100%;
	text-align: center;
	display: block;
	height: 26px;
	background: #BBB;
	font-size: 1.4em;
	padding: 10px 0;
	cursor:pointer;
}
/*ADD*/

.navadd{
	width: 256px;
	margin: 5px auto 0 auto;
	height:35px;
	-webkit-border-radius: 5px 5px 0px 0px;
}
.navadd a{
	width:45px;
	height:35px;
	display:block;
	-webkit-border-radius: 5px 5px 0px 0px;
	background: gradient(linear, left top, left bottom, from(#777), to(#fff));
	background: -webkit-gradient(linear, left top, left bottom, from(#777), to(#fff));
	background: -moz-gradient(linear, left top, left bottom, from(#777), to(#fff));
	float:left;
	text-align: center;
	margin:0 1px;
}
.navadd a.act{
	background: gradient(linear, left top, left bottom, from(#ccc), to(#fff));
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
	background: -moz-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
	width: 160px;
	color:#000;
	font-size:18px;
	text-decoration:none;
	padding: 5px 0;
	height: 25px;
}
.navadd a.btn_insulin div{
	width:35px;
	height:35px;
	background: url(images/sprite.png) no-repeat 0 -239px;
	margin:0 auto;
}
.navadd a.btn_dextro div{
	width:35px;
	height:35px;
	background: url(images/sprite.png) no-repeat 0 -203px;
	margin:0 auto;
}
.navadd a.btn_com div{
	width:35px;
	height:35px;
	background: url(images/sprite.png) no-repeat 0 -167px;
	margin:0 auto;
}
.form2 {
	margin: 0 auto 30px auto;
	padding: 10px;
	width: 240px;
	background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
	-webkit-box-shadow: 0 -1px 0px #fff, 0 1px 0px #ccc, 0 2px 2px #999;
	-webkit-border-radius: 3px;
}

.form2 input[type="button"], .form2 input[type="text"], .form2 input[type="number"], .form2 input[type="datetime"]{
	display: block;
	margin: 0 0 5px;
	padding: 5px;
	width: 230px;
	background: -webkit-gradient(linear, left top, left bottom,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(40%, rgba(31,31,31,0)),
					color-stop(60%, rgba(31,31,31,0))),
				-webkit-gradient(linear, left top, right top,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(10%, rgba(31,31,31,0)),
					color-stop(90%, rgba(31,31,31,0))),
					#333;
	border: 0;
	-webkit-border-radius: 3px;
	color: #DDD;
	font-size: 18px;
}
.form2 select{
	display: block;
	margin: 0 0 5px;
	padding: 5px;
	width: 240px;
	height: 31px;
	background: -webkit-gradient(linear, left top, left bottom,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(40%, rgba(31,31,31,0)),
					color-stop(60%, rgba(31,31,31,0))),
				-webkit-gradient(linear, left top, right top,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(10%, rgba(31,31,31,0)),
					color-stop(90%, rgba(31,31,31,0))),
					#333;
	border: 0;
	-webkit-border-radius: 3px;
	color: #DDD;
	font-size: 18px;
}
.form2 textarea{
	display: block;
	margin: 0 0 5px;
	padding: 5px;
	width: 230px;
	height: 100px;
	background: -webkit-gradient(linear, left top, left bottom,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(40%, rgba(31,31,31,0)),
					color-stop(60%, rgba(31,31,31,0))),
				-webkit-gradient(linear, left top, right top,
					from(rgba(31,31,31,1)),
					to(rgba(31,31,31,1)),
					color-stop(10%, rgba(31,31,31,0)),
					color-stop(90%, rgba(31,31,31,0))),
					#333;
	border: 0;
	-webkit-border-radius: 3px;
	color: #DDD;
	font-size: 18px;
}
.form2 input[type="button"] {
	margin: 10px 0 0 0;
	width: 240px;
	background: -webkit-gradient(linear, left top, left bottom, from(#0C6), to(#060));
	color: #eee;
	text-shadow: -1px -1px 0 rgba(0,0,0,.7);
	cursor:pointer;
}

/*TABLE*/

#table #line{
	width:100%;
	height:50px;	
	position:absolute;
	top:0;
}
#table #line2{
	width:100%;	
	margin-top:50px;
}